<script setup lang="ts">
  import { ArrowDown } from '@element-plus/icons-vue'
  import { PropType, ref } from 'vue'
  import CustomFieldConnectModal from './CustomFieldConnectModal.vue'
  import { MultipleOperateType } from './types'
  import { ElMessageBox } from 'element-plus'
  import infoTip from '@/config/info-tip'
  import {
    useConnectFieldListMobileShow,
    useConnectFieldListMobileHide,
    useConnectFieldListRequired,
    useConnectFieldListUnRequired,
    useConnectFieldListDel,
  } from '@/services/pages/return-factory/useModule'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { show } = useConnectFieldListMobileShow()
  const { hide } = useConnectFieldListMobileHide()
  const { required } = useConnectFieldListRequired()
  const { unRequired } = useConnectFieldListUnRequired()
  const { del } = useConnectFieldListDel()

  defineOptions({
    name: 'HeaderReturnFactoryDetailCustomFieldConnect',
  })

  const props = defineProps({
    selectedFieldIds: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    moduleId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  const customFieldConnectModalVisible = ref(false)

  const handleMultipleOperate = (type: MultipleOperateType) => {
    if (props.selectedFieldIds.length === 0) {
      return
    }

    const msgOption: Record<MultipleOperateType, string> = {
      mobileHide: infoTip.returnFactory.moduleConnectCustomField.multiple_mobile_hide,
      mobileShow: infoTip.returnFactory.moduleConnectCustomField.multiple_mobile_show,
      required: infoTip.returnFactory.moduleConnectCustomField.multiple_required,
      unRequired: infoTip.returnFactory.moduleConnectCustomField.multiple_un_required,
      del: infoTip.returnFactory.moduleConnectCustomField.multiple_del,
    }

    ElMessageBox({
      title: '提示',
      message: msgOption[type],
      type: 'warning',
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
          return
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          let res: APIResponse | null = null
          switch (type) {
            case 'mobileShow':
              res = await show(props.selectedFieldIds)
              break
            case 'mobileHide':
              res = await hide(props.selectedFieldIds)
              break
            case 'required':
              res = await required(props.selectedFieldIds)
              break
            case 'unRequired':
              res = await unRequired(props.selectedFieldIds)
              break
            case 'del':
              res = await del(props.selectedFieldIds)
              break
          }
          if (res.code === 20000) {
            const successMsgOption: Record<MultipleOperateType, string> = {
              mobileShow:
                infoTip.returnFactory.moduleConnectCustomField.multiple_mobile_show_success,
              mobileHide:
                infoTip.returnFactory.moduleConnectCustomField.multiple_mobile_hide_success,
              required: infoTip.returnFactory.moduleConnectCustomField.multiple_required_success,
              unRequired:
                infoTip.returnFactory.moduleConnectCustomField.multiple_un_required_success,
              del: infoTip.returnFactory.moduleConnectCustomField.del_success,
            }
            HMessage.success(successMsgOption[type])
            done()
            emits('update')
            return
          }
          HMessageBox.error(res.message)
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
        }
      },
    })
  }
</script>

<template>
  <div class="header-return-factory-custom-field-connect">
    <h-plain-button @click="customFieldConnectModalVisible = true">关联自定义字段</h-plain-button>
    <el-dropdown trigger="click">
      <h-button :disabled="props.selectedFieldIds.length === 0">
        批量操作
        <el-icon>
          <arrow-down></arrow-down>
        </el-icon>
      </h-button>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleMultipleOperate('required')">批量必填</el-dropdown-item>
          <el-dropdown-item @click="handleMultipleOperate('unRequired')"
            >批量不必填</el-dropdown-item
          >
          <el-dropdown-item @click="handleMultipleOperate('mobileShow')"
            >批量移动端显示</el-dropdown-item
          >
          <el-dropdown-item @click="handleMultipleOperate('mobileHide')"
            >批量移动端隐藏</el-dropdown-item
          >
          <el-dropdown-item @click="handleMultipleOperate('del')">删除</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <custom-field-connect-modal
      v-model:visible="customFieldConnectModalVisible"
      :module-id="props.moduleId"
      @update="emits('update')"
    ></custom-field-connect-modal>
  </div>
</template>

<style scoped lang="scss">
  .header-return-factory-custom-field-connect {
    display: flex;
    column-gap: 5px;
  }
</style>
